<template>
  <!-- 双折线 -->
  <div :id="id" class="two-line-chart"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'TwoLine',

  props: {
    id: {
      type: String,
      default: '',
    },

    dataSet: {
      type: Object,
      default: () => {
        return {
          nameList: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月',
          ],
          dataList: [],
        };
        // return {
        //   nameList: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        //   dataList: [
        //     {
        //       name: '税收',
        //       unit:'万元',
        //       arr: [1, 8, 4, 5, 300, 7, 8, 2, 3, 8, 10, 120]
        //     },
        //     {
        //       name: '用电量',
        //        unit:'万度',
        //       arr: [10, 0, 10, 50, 6, 7, 8, 23, 3, 18, 10, 120]
        //     }
        //   ]
        // }
      },
    },
  },

  data() {
    return {
      timer: null,
    };
  },

  watch: {
    dataSet: {
      handler: function() {
        this.init();
      },
      deep: true,
      immediate: true,
    },
  },

  mounted() {
    this.init();
    this.$once('hook:beforeDestroy', () => {
      clearTimeout(this.timer);
    });
  },

  methods: {
    init() {
      const color = ['#1DF7FF', '#FF195A', '#FDC417', '#00ca26'];
      const { nameList = [], dataList = [] } = this.dataSet;
      const legendName = [];
      const series = [];

      // 单位
      const unit0 = dataList[0] && dataList[0].unit;
      const unit1 = dataList[1] && dataList[1].unit;

      // 选择的索引 改变折线的颜色
      const color0 = (dataList[0] && dataList[0].index) || 0;
      const color1 = (dataList[1] && dataList[1].index) || 2;

      dataList.map((item, index) => {
        legendName.push(item.name);
        series.push({
          type: 'line',
          color: index == 0 ? color[color0] : color[color1],
          symbol: 'none',
          // symbol: 'circle',
          // symbolSize:10,
          // smooth: true,
          name: item.name,
          yAxisIndex: index,
          data: item.arr,
        });
      });

      const firstArr = dataList[0].arr.map(
        (item) => item != '' && item != null && item >= 0,
      );
      const lastArr = dataList[1].arr.map(
        (item) => item != '' && item != null && item >= 0,
      );
      const firstTrue = firstArr.some((item) => item == true);
      const lastTrue = lastArr.some((item) => item == true);

      const option = {
        legend: {
          bottom: 0,
          textStyle: {
            color: '#999999',
            fontSize: 14,
          },
          itemWidth: 20,
          itemHeight: 12,
          itemGap: 35,
          selectedMode: false,
          data: legendName,
        },
        grid: {
          top: '50',
          left: '10',
          right: '30',
          bottom: '30',
          containLabel: true,
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          textStyle: {
            color: '#fff',
            fontSize: 14,
          },
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          borderWidth: 0,
          confine: true,
          formatter: (params) => {
            if (params.length) {
              let html = `${params[0].axisValue}<br/> `;
              params.map((item, index) => {
                const a = `${item.marker}${item.seriesName}:`;
                const isValue =
                  item.value !== '' &&
                  item.value != null &&
                  item.value != undefined;

                if (index == 0) {
                  html += `${a} ${
                    isValue ? item.value + unit0 : '未公布'
                  }<br/>`;
                } else {
                  html += `${a} ${isValue ? item.value + unit1 : '未公布'}`;
                }
              });
              return html;
            }
          },
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'rgba(153, 153, 153, 0.2)',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#32E8DA',
            fontSize: 12,
          },
          splitArea: {
            show: false,
          },
          data: nameList,
        },

        yAxis: [
          {
            type: 'value',
            name: firstTrue ? unit0 : '',
            nameTextStyle: {
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 12,
              padding: firstTrue ? [0, 0, 5, -30] : [0, 0, 5, 0],
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.2)',
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 12,
              formatter: '{value}',
            },
            splitLine: {
              show: firstTrue,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.2)',
                opacity: 1,
              },
            },
            splitArea: {
              show: false,
            },
          },
          {
            type: 'value',
            name: lastTrue ? unit1 : '',
            nameTextStyle: {
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 12,
              padding: lastTrue ? [0, 0, 5, 30] : [0, 0, 5, 0],
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: 'rgba(153, 153, 153, 0.2)',
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 12,
              formatter: '{value}',
            },
            splitLine: {
              show: !firstTrue,
              lineStyle: {
                color: 'rgba(153, 153, 153, 0.2)',
              },
            },
            splitArea: {
              show: false,
            },
          },
        ],

        series: series,
      };

      this.timer = setTimeout(() => {
        const myChart = echarts.init(document.getElementById(this.id));
        myChart.clear();
        myChart.setOption(option);
      }, 500);
    },
  },
};
</script>
<style lang="scss" scoped>
.two-line-chart {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
